<template>
  <!-- 根节点作为地图的容器 -->
  <div id="map_container" style="width: 100%; height: 100%"></div>
</template>

<script>
export default {
  mounted() {
    // 自动加载渲染地图的方法
    this.initMap();
  },
  methods: {
    // 初始化地图
    initMap() {
      // 获取当前的定位 浏览器定位
      AMap.plugin("AMap.Geolocation", function () {
        var geolocation = new AMap.Geolocation({
          // 是否使用高精度定位，默认：true
          enableHighAccuracy: true,
          // 设置定位超时时间，默认：无穷大
          timeout: 10000,
          // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
          buttonOffset: new AMap.Pixel(10, 20),
          //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          zoomToAccuracy: true,
          //  定位按钮的排放位置,  RB表示右下
          buttonPosition: "RB",
        });

        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, "complete", onComplete);
        AMap.event.addListener(geolocation, "error", onError);

        function onComplete(data) {
          // data是具体的定位信息
          console.log(data);
          // 创建了一个地图的实例 在对应的容器中进行显示
          var map = new AMap.Map("map_container", {
            zoom: 15, //级别
            center: [data.position.lng, data.position.lat], //中心点坐标
            viewMode: "3D", //使用3D视图
          });

          // 创建一个 Marker 实例：
          var marker = new AMap.Marker({
            position: new AMap.LngLat(data.position.lng, data.position.lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            // title: data.addressComponent.city,
            title: data.formattedAddress,
          });

          // 将创建的点标记添加到已有的地图实例：
          map.add(marker);
        }

        function onError(data) {
          // 定位出错
        }
      });
    },
  },
};
</script>

<style scoped>
</style>